<template>
  <el-container>
    <div class="topbar">
      <div class="nav">
        <ul>
          <li>
            <button type="button" class="el-button el-button--text">
              <!----><!----><span>登录</span></button
            ><span class="sep">|</span
            ><button type="button" class="el-button el-button--text">
              <!----><!----><span>注册</span>
            </button>
          </li>
          <li><a href="#/order" class="">我的订单</a></li>
          <li><a href="#/collect" class="">我的收藏</a></li>
          <li class="shopCart">
            <a href="#/shoppingCart" class=""
              ><i class="el-icon-shopping-cart-full"></i> 购物车
              <span class="num">(0)</span></a
            >
          </li>
        </ul>
      </div>
    </div>
    <header class="el-header" style="height: 60px">
      <ul role="menubar" class="el-menu-demo el-menu--horizontal el-menu">
        <div class="logo" tabindex="0">
          <img src="../../public/Logo.png" alt="" />
        </div>
        <li
          role="menuitem"
          tabindex="0"
          class="el-menu-item"
          style="border-bottom-color: transparent"
        >
          首页
        </li>
        <li
          role="menuitem"
          tabindex="0"
          class="el-menu-item is-active"
          style="
            border-bottom-color: rgb(64, 158, 255);
            color: rgb(64, 158, 255);
          "
        >
          全部商品
        </li>
        <li
          role="menuitem"
          tabindex="0"
          class="el-menu-item"
          style="border-bottom-color: transparent"
        >
          关于我们
        </li>
        <div class="so" tabindex="0">
          <div class="el-input el-input-group el-input-group--append">
            <!----><input
              type="text"
              autocomplete="off"
              placeholder="请输入搜索内容"
              class="el-input__inner"
            /><!----><!---->
            <div class="el-input-group__append">
              <button type="button" class="el-button el-button--default">
                <!----><i class="el-icon-search"></i
                ><!---->
              </button>
            </div>
            <!---->
          </div>
        </div>
      </ul>
    </header>
    <el-main>
      <div class="goods">
        <div class="el-breadcrumb">
          <div class="el-bread">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="font-size: 16px"
            >
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>全部商品</el-breadcrumb-item>
              <el-breadcrumb-item>分类</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="nav">
          <div class="el-tabs_header_top">
            <div class="el-tabs_header">
              <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="handleClick"
              >
                <el-tab-pane label="全部" name="first"></el-tab-pane>
                <el-tab-pane label="手机" name="second"></el-tab-pane>
                <el-tab-pane label="电视" name="third"></el-tab-pane>
                <el-tab-pane label="空调" name="fourth"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="list">
            <li style="text-align:center">
              <a href="javascript:;"></a>
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Mi-CC9.png"
                alt=""
              />
              <h3 style="font-weight: normal">手机型号</h3>
              <h5 style="font-weight: normal; color:#b0b0b0">简短描述</h5>
              <p><span style="color:#FF6700">1999元</span></p>
            </li>
            <li style="text-align:center">
              <a href="javascript:;"></a>
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Mi-CC9.png"
                alt=""
              />
              <h3 style="font-weight: normal">手机型号</h3>
              <h5 style="font-weight: normal; color:#b0b0b0">简短描述</h5>
              <p><span style="color:#FF6700">1999元</span></p>
            </li>
            <li style="text-align:center">
              <a href="javascript:;"></a>
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Mi-CC9.png"
                alt=""
              />
              <h3 style="font-weight: normal">手机型号</h3>
              <h5 style="font-weight: normal; color:#b0b0b0">简短描述</h5>
              <p><span style="color:#FF6700">1999元</span></p>
            </li>
            <li style="text-align:center">
              <a href="javascript:;"></a>
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Mi-CC9.png"
                alt=""
              />
              <h3 style="font-weight: normal">手机型号</h3>
              <h5 style="font-weight: normal; color:#b0b0b0">简短描述</h5>
              <p><span style="color:#FF6700">1999元</span></p>
            </li>
            <li style="text-align:center">
              <a href="javascript:;"></a>
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Mi-CC9.png"
                alt=""
              />
              <h3 style="font-weight: normal">手机型号</h3>
              <h5 style="font-weight: normal; color:#b0b0b0">简短描述</h5>
              <p><span style="color:#FF6700">1999元</span></p>
            </li>
          </div>
          <div class="block">
            <el-pagination layout="prev, pager, next" :total="50">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer>
      <div style="width: 300px; margin: 0 auto; padding: 20px 0">
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35018202000233"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img
            src="https://jkd.link/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            style="float: left"
          />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽公网安备35018202000233号
          </p>
        </a>
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽ICP备2020020768号
          </p>
        </a>
      </div>
    </el-footer>
  </el-container>
</template>

<style>
* {
  margin: 0;
  border: none;
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
}
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
.topbar .nav {
  width: 1225px;
  margin: 0 auto;
}
.topbar .nav ul {
  float: right;
}
.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}
.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}
.topbar .nav li .el-button {
  color: #b0b0b0;
}
.topbar .nav .el-button:hover {
  color: #fff;
}
.topbar .nav li a {
  color: #b0b0b0;
}
.topbar .nav a:hover {
  color: #fff;
}
.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}
.topbar .nav .shopCart:hover {
  background: #fff;
}
.topbar .nav .shopCart:hover a {
  color: #ff6700;
}
.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}
.topbar .nav .shopCart-full a {
  color: #fff;
}
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 100px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
.el-footer {
  background-color: #3d3d3d;
  height: 80px !important;
  /* position: absolute;
  left: 0;
  right: 0;
  bottom: 0; */
}
.el-main {
  padding: 20px 0;
}
.el-main .goods {
  background-color: #f5f5f5;
}
.el-main .goods .el-breadcrumb {
  height: 50px;
  background-color: #ffffff;
}
.el-main .goods .el-breadcrumb .el-bread {
  max-width: 1225px;
  margin: 0 auto;
}
.el-main .goods .nav .el-tabs_header {
  max-width: 1225px;
  margin: 0 auto;
}
.el-main .goods .nav {
  height: 42px;
  background-color: #ffffff;
}
.el-main .goods .nav .el-tabs_header_top {
  margin: 0 0 15px;
  height: 42px;
}
.el-main .goods .main .list {
  min-height: 664.5px;
  padding-top: 14.5px;
  margin-left: 13.7px;
  margin: 0 auto;
  overflow: auto;
  width: 1238.69px;
}
.el-main .goods .main .list li {
  width: 234px;
  height: 300px;
  padding: 10px 0;
  margin: 0 5.5px 14.5px 8px;
  background-color: #ffffff;
  display: inline-block;
}
.el-main .goods .main .block {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
}
</style>>

<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>